<template>
  <div class="card" @click="jumpTo(title, imgUrl)">
    <slot name="content">
      <div class="card-img">
        <img :src="imgUrl" :style='{maxHeight: imgHeigth}'>
      </div>
      <slot name="text">
        <div class="card-text">
          <div class="card-title">{{ title }}</div>
          <div class="card-subtext">{{ subText }}</div>
          <div class="card-detail">{{ detailText }}</div>
        </div>
      </slot>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'zCard',
  data() {
    return {

    }
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    subText: {
      type: String,
      default: ""
    },
    detailText: {
      type: String,
      default: ""
    },
    imgUrl: {
      type: String,
      default: ""
    },
    imgHeigth: {
      type: String,
      default: 'auto'
    }
  },
  mounted() {
  },
  methods: {
    jumpTo(title, imgUrl) {
      this.$emit('jump', title, imgUrl)
    }
  }
}
</script>

<style scoped>
.card {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 358px;
  height: 358px;
  background-color: #fff;
  border: 1px solid rgba(230,230,230,1);
  transition: 0.5s;
}
.card:hover {
  border-color: transparent;
  box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.1);
}
.card:hover .card-text {
  height: 220px;
}
.card:hover .card-title {
  font-size: 16px;
  color: rgba(0,136,222,1);
  line-height: 22px;
}
.card:hover .card-detail {
  opacity: 1;
}
.card-img {
  width: 100%;
  overflow: hidden;
  display: inline-flex;
  justify-content: center;
}
.card-img img {
  max-height: 240px;
}
.card-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 120px;
  overflow: hidden;
  text-align: center;
  padding: 34px 27px;
  background-color: #fff;
  transition: 0.5s;
}
.card-title {
  font-size: 16px;
  color: rgba(51,51,51,1);
  line-height: 22px;
  margin-bottom: 10px;
  transition: 0.5s;
}
.card-subtext {
  font-size: 14px;
  color: rgba(154,154,154,1);
  line-height: 20px;
}
.card-detail {
  opacity: 0;
  font-size: 14px;
  color: rgba(154,154,154,1);
  line-height: 20px;
  margin-top: 34px;
  width: 100%;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden;  /** 隐藏超出的内容 **/
  transition: 0.5s;
}
</style>
